<script setup>

import {useRouter} from "vue-router";

const router = useRouter()

const toDemo = () => {
  router.push({path: '/demo'})
}
const toHey = () => {
  router.push({name:'hey'})
}



</script>

<template>
  <div id="d1">
    <div id="d2">
      <RouterLink to="/demo">去demo</RouterLink>
      <br>
      <RouterLink to="/hey">去hey</RouterLink>
      <br>
      <button @click ="toDemo">去demo</button>
      <br>
      <button @click ="toHey">去hey</button>
    </div>
    <div id="d3">
      <RouterView/>
    </div>
  </div>
</template>

<style scoped>
#d1{
  display: flex;
}
#d2{
  width: 300px;
  height: 100%;
  background-color: darkgray;
}


</style>